LIVE DEMO · v3.0

Drum Machine Plugin

16/32-step sequencer with 8 synthesized instruments, per-step velocity, swing, and genre presets. Load your own samples or pick from the built-in CC0 library. Bounce renders to a downloadable WAV.

INSTRUMENTS

MAX STEPS

FREE SAMPLES

NEW

↑

LOAD FILES

NEW

DEPS

⬡ DRUM MACHINE · v3.0.0 Ready

⚠ Browser autoplay requires a user gesture — click Play to activate audio. Sample library renders locally — no internet. Fully offline. Per-row step divisions (1/32 to 1/4T).

▶

Play

Click Play in the plugin header to start the sequencer. Space bar works too.

⬡

Steps

Click any step to toggle it on/off. Right-click a step to set its velocity.

⬡

Load Samples

Click the small ⬡ synth label under any instrument name to open the Sample Browser.

↑

Upload Files

Drag any WAV/MP3/OGG onto a row, or use ↑ Upload in the browser panel.

▶

Preview Library

Hit ▶ next to any library sample to hear it before loading. Cached after first play.

↓

Bounce

Click ↓ Bounce to render a full-quality WAV — samples included. Appears in the sidebar.

LOADED SAMPLES

LIBRARY CACHE

No library samples fetched yet — open the browser and preview or load one.

BOUNCED AUDIO

No bounces yet — click ↓ Bounce inside the plugin.

NPM

# Install
npm install wavr-drum-machine

# Standalone
import DrumMachine
  from "wavr-drum-machine";

const dm = new DrumMachine({
  audioContext: ctx,
  bpm: 120
});
dm.mount(el);

WAVR PRO PLUGIN

import DrumMachine
  from "wavr-drum-machine";

// Register once:
pm.register(DrumMachine);

// Opens from topbar.
// Bounce → new DAW track.

LOAD SAMPLE PROGRAMMATICALLY

// Load from URL
const resp = await fetch(url);
const ab  = await resp.arrayBuffer();
const buf = await ctx.decodeAudioData(ab);

dm.loadSampleBuffer(
  "kick",   // instrument id
  buf,       // AudioBuffer
  "My Kick" // display name
);

// Restore synth:
dm.clearSample("kick");

↓

npm package

wavr-drum-machine